<div style="width: 790px;height: 730px;position: relative;" class="dialog-mdsd-v">
    <h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-draggable>{{'editor.controls-slider-settings' | translate}}</h1>
    <mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">clear</mat-icon>
    <mat-tab-group style="width: 100%;">
        <mat-tab label="{{'slider.property-props' | translate}}">
            <div style="display: block;width: 660px;padding-top: 20px">
                <div style="display: block;">
                    <flex-auth [name]="name" [permission]="property.permission" #flexauth></flex-auth>
                </div>
                <div mat-dialog-content style="overflow: hidden; width:100%">
                    <flex-head [data]="data" [property]="property" #flexhead></flex-head>
                </div>
            </div>
            <div style="width: 100%; height: 515px; position: relative;">
                <div style="position: absolute;" [style.width]="sliderLayout.width + 'px'" [style.height]="sliderLayout.height + 'px'" [style.top]="sliderLayout.top + 'px'"
                    [style.left]="sliderLayout.left + 'px'">
                    <ngx-nouislider #slider></ngx-nouislider>
                </div>
                <div style="width: 280px;height: 100%;float: right;">
                    <div class="field-row" style="margin-top: 20px;">
                        <div class="my-form-field" style="width: 120px;">
                            <span>{{'slider.property-orientation' | translate}}</span>
                            <mat-select [(value)]="options.orientation" (selectionChange)="setSliderOptions()">
                                <mat-option *ngFor="let ev of orientationType | enumToArray" [value]="ev.key">
                                    {{ ev.value }}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="my-form-field" style="width: 120px;margin-left: 20px;">
                            <span>{{'slider.property-direction' | translate}}</span>
                            <mat-select [(value)]="options.direction" (selectionChange)="setSliderOptions()">
                                <mat-option *ngFor="let ev of directionType | enumToArray" [value]="ev.key">
                                    {{ ev.value }}
                                </mat-option>
                            </mat-select>
                        </div>
                    </div>
                    <div class="field-row slider-field">
                        <div class="my-form-field" style="width:163px">
                            <span>{{'slider.property-font' | translate}}</span>
                            <mat-select [(value)]="options.fontFamily" (selectionChange)="onChangeOptions('fontFamily',  $event.value)">
                                <mat-option *ngFor="let font of fonts" [style.fontFamily]="font" [value]="font">
                                    {{font}}
                                </mat-option>
                            </mat-select>
                        </div>
                    </div>
                    <div class="field-row" style="margin-top: 20px;">
                        <div class="my-form-field slider-field color-field">
                            <span>{{'slider.property-slider-color' | translate}}</span>
                            <input [(colorPicker)]="options.shape.connectColor" [style.background]="options.shape.connectColor" [cpAlphaChannel]="'always'" class="input-color"
                                [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 78px"
                                [cpPosition]="'left'" (colorPickerChange)="setSliderOptions()" />
                        </div>
                        <div class="my-form-field slider-field color-field" style="padding-left: 10px">
                            <span>{{'slider.property-slider-background' | translate}}</span>
                            <input [(colorPicker)]="options.shape.baseColor" [style.background]="options.shape.baseColor" [cpAlphaChannel]="'always'" class="input-color"
                                [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 78px"
                                [cpPosition]="'left'" (colorPickerChange)="setSliderOptions()" />
                        </div>
                        <div class="my-form-field slider-field color-field" style="padding-left: 10px">
                            <span>{{'slider.property-slider-handle' | translate}}</span>
                            <input [(colorPicker)]="options.shape.handleColor" [style.background]="options.shape.handleColor" [cpAlphaChannel]="'always'" class="input-color"
                                [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 78px"
                                [cpPosition]="'left'" (colorPickerChange)="setSliderOptions()" />
                        </div>
                    </div>
                    <div class="field-row">
                        <div class="my-form-field slider-field">
                            <span>{{'slider.property-min' | translate}}</span>
                            <input numberOnly [(ngModel)]="options.range.min" (change)="onChangeOptions('min', options.range.min)"
                                style="width: 50px;text-align: center;display:inline-block;" type="text">
                        </div>
                        <div class="my-form-field slider-field" style="padding-left: 12px">
                            <span>{{'slider.property-max' | translate}}</span>
                            <input numberOnly [(ngModel)]="options.range.max" (change)="onChangeOptions('max', options.range.max)"
                                style="width: 50px;text-align: center;display:inline-block;" type="text">
                        </div>
                        <div class="my-form-field slider-field" style="padding-left: 12px">
                            <span>{{'slider.property-step' | translate}}</span>
                            <input numberOnly [(ngModel)]="options.step" (change)="onChangeOptions('step', options.step)"
                                style="width: 50px;text-align: center;display:inline-block;" type="text">
                        </div>
                    </div>
                    <div class="field-row" style="margin-top: 20px;">
                        <div class="my-form-field slider-field">
                            <div class="my-form-field slider-field">
                                <span style="max-width: 180px">{{'slider.property-scala' | translate}}</span>
                                <input [(ngModel)]="staticScala" (change)="onChangeOptions('staticScala', staticScala)" style="width: 160px;" type="text">
                            </div>
                            <div class="my-form-field slider-field color-field" style="padding-left: 10px">
                                <span>{{'slider.property-marker-color' | translate}}</span>
                                <input [(colorPicker)]="options.marker.color" [style.background]="options.marker.color" [cpAlphaChannel]="'always'" class="input-color"
                                    [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                    [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 78px"
                                    [cpPosition]="'top'" (colorPickerChange)="setSliderOptions()" />
                            </div>
                        </div>
                    </div>
                    <div class="field-row">
                        <div class="my-form-field slider-field">
                            <span>{{'slider.property-font-size' | translate}}</span>
                            <mat-slider style="display:inline-block;" [max]="50" [min]="6" [step]="1" [thumbLabel]="true" [(ngModel)]="options.marker.fontSize"
                                (change)="setSliderOptions()">
                            </mat-slider>
                        </div>
                        <div class="my-form-field slider-field" style="padding-left: 10px">
                            <span>{{'slider.property-divisions-height' | translate}}</span>
                            <mat-slider style="display:inline-block;min-width: 60px;" [max]="15" [min]="0" [step]="1" [thumbLabel]="true" [(ngModel)]="options.marker.divHeight"
                                (change)="setSliderOptions()">
                            </mat-slider>
                        </div>
                        <div class="my-form-field slider-field" style="padding-left: 10px">
                            <span>{{'slider.property-divisions-width' | translate}}</span>
                            <mat-slider style="display:inline-block;min-width: 60px;" [max]="15" [min]="0" [step]="1" [thumbLabel]="true" [(ngModel)]="options.marker.divWidth"
                                (change)="setSliderOptions()">
                            </mat-slider>
                        </div>
                    </div>
                    <div class="field-row">
                        <div class="my-form-field slider-field">
                            <span>{{'slider.property-subdivisions' | translate}}</span>
                            <mat-slider style="display:inline-block;" [max]="50" [min]="0" [step]="1" [thumbLabel]="true" [(ngModel)]="options.pips.density"
                                (change)="setSliderOptions()">
                            </mat-slider>
                        </div>
                        <div class="my-form-field slider-field" style="padding-left: 10px">
                            <span>{{'slider.property-subdivisions-height' | translate}}</span>
                            <mat-slider style="display:inline-block;min-width: 60px;" [max]="15" [min]="0" [step]="1" [thumbLabel]="true" [(ngModel)]="options.marker.subHeight"
                                (change)="setSliderOptions()">
                            </mat-slider>
                        </div>
                        <div class="my-form-field slider-field" style="padding-left: 10px">
                            <span>{{'slider.property-subdivisions-width' | translate}}</span>
                            <mat-slider style="display:inline-block;min-width: 60px;" [max]="15" [min]="0" [step]="1" [thumbLabel]="true" [(ngModel)]="options.marker.subWidth"
                                (change)="setSliderOptions()">
                            </mat-slider>
                        </div>
                    </div>
                    <div class="field-row" style="margin-top: 20px;">
                        <div class="my-form-field" style="width: 80px;">
                            <span>{{'slider.property-tooltip' | translate}}</span>
                            <mat-select [(value)]="options.tooltip.type" (selectionChange)="onChangeOptions('tooltipType', options.tooltip.type)">
                                <mat-option *ngFor="let ev of tooltipType | enumToArray" [value]="ev.key">
                                    {{ ev.value }}
                                </mat-option>
                            </mat-select>
                        </div>
                        <div class="my-form-field slider-field color-field" style="padding-left: 17px">
                            <span>{{'slider.property-tooltip-color' | translate}}</span>
                            <input [(colorPicker)]="options.tooltip.color" [style.background]="options.tooltip.color" [cpAlphaChannel]="'always'" class="input-color"
                                [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 78px"
                                [cpPosition]="'top'" (colorPickerChange)="setSliderOptions()" />
                        </div>
                        <div class="my-form-field slider-field color-field" style="padding-left: 10px">
                            <span>{{'slider.property-tooltip-background' | translate}}</span>
                            <input [(colorPicker)]="options.tooltip.background" [style.background]="options.tooltip.background" [cpAlphaChannel]="'always'" class="input-color"
                                [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                                [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 78px"
                                [cpPosition]="'top'" (colorPickerChange)="setSliderOptions()" />
                        </div>
                    </div>
                    <div class="field-row">
                        <div class="my-form-field slider-field">
                            <span>{{'slider.property-tooltip-font-size' | translate}}</span>
                            <mat-slider style="display:inline-block;" [max]="50" [min]="6" [step]="1" [thumbLabel]="true" [(ngModel)]="options.tooltip.fontSize"
                                (change)="setSliderOptions()">
                            </mat-slider>
                        </div>
                        <div class="my-form-field slider-field" style="padding-left: 10px">
                            <span>{{'slider.property-tooltip-decimals' | translate}}</span>
                            <mat-slider style="display:inline-block;min-width: 60px;" [max]="3" [min]="0" [step]="1" [thumbLabel]="true" [(ngModel)]="options.tooltip.decimals"
                                (change)="setSliderOptions()">
                            </mat-slider>
                        </div>
                    </div>
                </div>
            </div>
        </mat-tab>
    </mat-tab-group>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick()" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>